<template>
  <div>
    <div @click="test">hihihihi</div>
    <ul>
      <li>
        <img :src="pic" alt="">
      </li>
      <li>
        <img :src="pic1" alt="">
      </li>
      <li>
        <img :src="pic2" alt="">
      </li>
      <li>
        <canvas id="canvas"></canvas>
      </li>
      <li>
        <canvas id="chend"></canvas>
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        urlArr: [],
        pic: '',
        pic1: '',
        pic2: '',
        canvas: '',
        ctx: ''
      }
    },
    methods: {
      /**
       * 获取不同状态的图标URl
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-08-15
       * @param      {String}   options.imgUrl 图标地址
       * @param      {String}   options.status 图标状态
       */
      getUrl ({imgUrl, status}) {
        var img = new Image()
        var imgStatus = new Image()
        img.src = imgUrl
        switch (status) {
          case '00':
            imgStatus.src = require('../../assets/images/mapIconTest/2dUpload.png')
            break
          case '01':
            imgStatus.src = require('../../assets/images/mapIconTest/2dUnedit.png')
            break
          case '02':
            imgStatus.src = require('../../assets/images/mapIconTest/2dUnlink.png')
            break
          case '03':
          default:
            break
        }
        this.canvas = document.getElementById('canvas')
        this.ctx = this.canvas.getContext('2d')
        return new Promise((resolve, reject) => {
          img.onload = () => {
            this.canvas.height = 100 || img.height + 20
            this.canvas.width = 100 || img.width + 20
            if (!imgStatus.src) {
              this.ctx.drawImage(img, this.canvas.height / 2 - img.height / 2, this.canvas.height / 2 - img.width / 2)
              resolve(this.canvas.toDataURL())
            } else {
              imgStatus.onload = () => {
                this.ctx.drawImage(img, this.canvas.height / 2 - img.height / 2, this.canvas.height / 2 - img.width / 2)
                this.ctx.drawImage(imgStatus, this.canvas.height / 2 - imgStatus.height / 2 + 15, this.canvas.height / 2 - imgStatus.width / 2 + 10)
                resolve(this.canvas.toDataURL())
              }
            }
          }
        })
      },
      /**
       * 批量格式化图片
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-08-15
       * @param      {Array}   urlArr 图片地址数组
       */
      urlFormat (urlArr) {
        return new Promise((resolve, reject) => {
          urlArr.forEach((v, index) => {
            ['00', '01', '02', '03', '00', '01', '03'].forEach(status => {
              this.getUrl({imgUrl: v.img, status}).then(res => {
                v[status] = res
                if (status === '03' && (index === urlArr.length - 1)) {
                  resolve(urlArr)
                }
              })
            })
          })
        })
      },
      test () {
        for (var i = 0; i < 1; i++) {
          this.urlArr.push({img: require('../../assets/images/mapIconTest/car.png')})
        }
        console.log(this.urlArr)
        console.time('aaaaaaaaaaaaaaa')
        this.urlFormat(this.urlArr).then(res => {
          this.pic = res[0]['00']
         console.timeEnd('aaaaaaaaaaaaaaa')
        })
      }
    },
    mounted () {
      var canvas = document.getElementById('chend')
      var ctx = canvas.getContext('2d')
      var noraml = [0, 0, 1]
      var pointLight = [100, 100, 10]
      var imageData = ctx.createImageData(200, 200)
      var a = (x, y) => {
        return x.map((v, index) => y[index] - v)
      }
      var b = (x) => {
        var len = Math.sqrt(x[0] * x[0] + x[1] * x[1] + x[2] * x[2])
        return x.map(v => v / len)
      }
      var c = (x, y) => {
        return x[0] * y[0] + x[1] * y[1] + x[2] * y[2]
      }
      var imageData = ctx.createImageData(200, 200)
      canvas.height = 200
      canvas.width = 200
      for (var x = 0; x < 200; x++) {
        for (var y = 0; y < 200; y++) {
          var index = y * 200 + x
          var point = [x, y, 0]
          var light = c(b(a(point, pointLight)), noraml)
          imageData.data[index * 4] = Math.min(255, light * 211)
          imageData.data[index * 4 + 1] = Math.min(255, light * 211)
          imageData.data[index * 4 + 2] = Math.min(255, light * 234)
          imageData.data[index * 4 + 3] = 111
        }
      }
      ctx.putImageData(imageData, 0, 0)
    }
  }
</script>
<style rel="stylesheet/less" lang="less" scoped="scoped">
  li {
    width: 100%;
    text-align: center;
    padding: 20px;
  }
</style>
